<template>
	<view class="container">
		<view class="user-section">
			<view class="user-info-box">
				<view>
					<u-avatar :src="(userInfo && userInfo.picture) || '/static/missing-face.png'" size="60"></u-avatar>
				</view>
				<view class="info-box">
					<text class="username">{{(userInfo && userInfo.name) || '游客'}}</text>
				</view>
			</view>
		</view>
		<view>
			<u-cell-group>
				<u-cell title="我的账户" :isLink="true" icon="/static/icon/账户.png" size="large"
					url="/pages/user/myaccount"></u-cell>
			</u-cell-group>
			<u-grid @click="click($event,'count')">
				<u-grid-item v-for="(Item,Index) in acountList" :key="Index" :custom-style="{ padding: '20rpx' }">
					<u-icon size="25" :name="Item.url"></u-icon>
					<text class="grid-text">{{Item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view>
			<u-cell-group>
				<u-cell title="我的订单" :isLink="true" icon="/static/icon/订单.png" size="large"
					url="/pages/order/orderlist"></u-cell>
			</u-cell-group>
			<u-grid col="4" @click="click($event,'order')">
				<u-grid-item v-for="(Item,Index) in orderList" :key="Index" :custom-style="{ padding: '20rpx' }">
					<u-badge  type="error" max="99" :value="Item.qty"  absolute   :offset="[5, 22]"></u-badge>
					<u-icon size="25" :name="Item.url" ></u-icon>
					<text class="grid-text">{{Item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<view>
			<u-cell-group>
				<u-cell title="我的工具" :isLink="true" icon="/static/icon/工具.png" size="large"
					url="/pages/public/mytool"></u-cell>
			</u-cell-group>
			<u-grid col="3" @click="click($event,'tool')">
				<u-grid-item v-for="(Item,Index) in toolList" :key="Index" :custom-style="{ padding: '20rpx' }">
					<u-icon size="25" :name="Item.url"></u-icon>
					<text class="grid-text">{{Item.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				acountList: [{
						name: 'photo',
						title: '余额',
						color: 'green',
						url: '/static/icon/余额.png',
						path: '/pages/user/mybalance'
					},
					{
						name: 'lock',
						title: '优惠卷',
						color: 'green',
						url: '/static/icon/优惠券.png',
						path: '/pages/user/mycoupon'
					},
					{
						name: 'star',
						title: '积分',
						color: 'green',
						url: '/static/icon/积分.png',
						path: '/pages/user/mypoints'
					}
				],
				orderList: [
					{
						name: 'lock',
						title: '代发货',
						url: '/static/icon/待发货.png',
						path: '/pages/order/orderlist?tab=1',
						qty:2
					},
					{
						name: 'star',
						title: '待收货',
						url: '/static/icon/待收货.png',
						path: '/pages/order/orderlist?tab=2',
						qty:3
					},
					{
						name: 'star',
						title: '评论',
						url: '/static/icon/评论.png',
						path: '/pages/order/ordercomment',
						qty:2
					},
					{
						name: 'star',
						title: '售后',
						url: '/static/icon/退款.png',
						path: '/pages/order/orderlist?tab=4',
						qty:1
					}
				],
				toolList: [{
						name: 'photo',
						title: '地址管理',
						url: '/static/icon/地址.png',
						path: '/pages/addressinfo/address'
					},
					{
						name: 'lock',
						title: '我的收藏',
						url: '/static/icon/收藏.png',
						path: '/pages/public/mycollect',
					},
					{
						name: 'star',
						title: '设置',
						url: '/static/icon/设置.png',
						path: '/pages/set/set'
					}
				],
			}
		},
		methods: {
			// #ifndef MP
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log('你点击了导航', index);
				if (index === 0) {
					uni.navigateTo({
						url: '/pages/set/set'
					});
				} else if (index === 1) {
					// uni.navigateTo({
					// 	url: '/pages/notice/notice'
					// })
				}
			},
			// #endif
			click(e, type) {
				let url = '';
				if (type == 'count') {
					url = this.acountList[e]['path'];
				} else if (type == 'order') {
					url = this.orderList[e]['path'];
				} else if (type == 'tool') {
					url = this.toolList[e]['path'];
				} else {
					console.log('类型错误');
					return;
				}
				if (!this.userInfo) {
					url = '/pages/public/login';
				}
				console.log('url', url);
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	.container {
		// #ifdef MP
		margin-top: 100upx;
		// #endif
	}

	.user-section {
		width: 100%;
		// #ifdef MP
		height: 150rpx;
		// #endif

		// #ifndef MP

		height: 200rpx;
		background-image: url('');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		// #endif

		padding: 60upx 60upx 0;
		position: relative;
	}


	.user-info-box {
		// #ifdef MP
		height: 150upx;
		// #endif
		// #ifndef MP
		height: 200upx;
		// #endif
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.user-info-box .username {
		margin-left: 20upx;
		font-size: 50rpx;
	}
	
</style>